<template>
  <div>
    <strong style="font-size: 20px;" ></strong>
    <div style="text-align: center"><strong style="font-size: 20px;margin: auto" >我的游戏</strong></div>
    <br>
    <el-table
        :data="tableData.filter(data => !search || data.gameName.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">

      <el-table-column
          label="">
        <template  slot-scope="scope">
          <el-image
              preview
              :src="'http://localhost:8080/GameStore/images/'+scope.row.gameImg"
              style="width: 80px;height: 80px;border-radius: 8px;margin-left: 60px"
          ></el-image>
        </template>
      </el-table-column>

      <el-table-column
          label="游戏名称"
          prop="gameName">
      </el-table-column>

      <el-table-column
          prop="gameType"
          label="游戏类型"
          :filters="[{ text: '角色扮演', value: '角色扮演' }, { text: '休闲益智', value: '休闲益智' },{ text: '经营策略', value: '经营策略' },{ text: '体育竞技', value: '体育竞技' },{ text: '动作射击', value: '动作射击' },{ text: '棋牌桌游', value: '棋牌桌游' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          sortable
          width="180"
          column-key="price"
      >
        <template slot-scope="scope">
          ¥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column
          prop="saleCount"
          label="销量"
          sortable
          width="180"
      >
      </el-table-column>
      <!--      游戏详情-->
      <el-table-column type="expand" style="width:20px">
        <template slot-scope="props">
          <el-row :gutter="20">
            <el-col :span="8">
              <div>
                <el-statistic group-separator="," :precision="2"  title="评分">

                </el-statistic>
                <el-rate
                    style="text-align: center"
                    v-model="value"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                </el-rate>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-statistic  title="销量">
                  <template slot="formatter">
                    {{props.row.saleCount}}
                  </template>

                </el-statistic>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <el-statistic  title="年满16周岁">
                  <template slot="formatter">
                    16+
                  </template>

                </el-statistic>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>


          <el-row :gutter="20">
            <el-col :span="15">
              <div>
                <div style="text-align: center"><strong style="font-size: 15px;text-align: center" >详情图片</strong></div>
                <br>
                <div style="height: 300px;width: 500px;text-align: center;margin: auto">
                  <el-carousel height="300px" width="300px" >
                    <el-carousel-item v-for="item in props.row.detailGameImg" :key="item">
                      <el-image
                          preview
                          :src="'http://localhost:8080/GameStore/images/'+item"
                          style="width: 500px;height: 300px;border-radius: 8px"
                      ></el-image>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <div ><strong style="font-size: 15px" >游戏介绍</strong></div>
                <br>
                <div style="text-align:left;margin-right: 50px">{{props.row.description}}</div>
              </div>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </template>
      </el-table-column>
      <el-table-column
          label=""
          style="width: 2px">
        详情
      </el-table-column>
      <el-table-column
          align="right">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              placeholder="输入关键字搜索">
            <el-button slot="append" icon="el-icon-search" style="float: left"></el-button>
          </el-input>
        </template>
      </el-table-column>
    </el-table>
    <strong style="font-size: 20px;" ><br></strong>
    <!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[1,5,10,100, 200, 300, 400]"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float: right">
    </el-pagination>
    <strong style="font-size: 20px;" ><br></strong> <strong style="font-size: 20px;" ><br></strong>

    <!--确认订单对话框-->
    <el-dialog
        :visible.sync="dialogVisible"
        v-if="dialogVisible"
        width="1000px"
        :before-close="handleClose">
      <div>
        <div style="text-align: center"><strong style="font-size: 20px;margin: auto" >确认订单</strong></div>
        <el-table
            show-summary
            :data="game"
            style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <div style="height: 300px;width: 500px;text-align: center;margin: auto">
                <el-carousel height="300px" width="300px" style="margin: auto">
                  <el-carousel-item v-for="item in 3" :key="item">
                    <h3 class="small">{{ item }}</h3>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <el-form label-position="left" inline class="demo-table-expand">

                <el-form-item label="游戏名称">
                  <span>{{ props.row.gameName }}</span>
                </el-form-item>
                <el-form-item label="游戏类型">
                  <span>{{ props.row.gameType }}</span>
                </el-form-item>
                <el-form-item label="价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>
                <el-form-item label="折扣">
                  <span>{{ props.row.saleCount }}</span>
                </el-form-item>
                <el-form-item label="游戏描述">
                  <span>{{ props.row.description }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

          <el-table-column
              label=""
          >
            <el-image
                :src="require('@/assets/logo.png')"
                style="width: 80px;height: 80px"
            ></el-image>
          </el-table-column>
          <el-table-column
              label="游戏名称"
              prop="gameName">
          </el-table-column>

          <el-table-column
              prop="gameType"
              label="游戏类型"

              filter-placement="bottom-end">
          </el-table-column>
          <el-table-column
              prop="price"
              label="价格/元"
              width="180"
              column-key="price"
          >
          </el-table-column>

        </el-table>

        <div style="text-align: center">
          <strong style="font-size: 20px;" >选择支付方式</strong>
          <strong style="font-size: 20px;" ><br></strong>
          <strong style="font-size: 20px;" ><br></strong>
          <strong style="font-size: 20px;" ><br></strong>
          <el-radio-group v-model="radio1" >
            <el-radio-button label="" >
              <el-image
                  style="width: 180px; height: 60px"
                  :src="require('@/assets/img_1.png')"
              ></el-image>
              <!--              style="width: 80px; height: 80px"-->
            </el-radio-button>
            <el-radio-button label="北京" >
              <el-image
                  style="width: 180px; height: 60px"
                  :src="require('@/assets/img_2.png')">
                <!--                  style="width: 80px; height: 80px"-->
              </el-image>
            </el-radio-button>
          </el-radio-group>
          <br><br><br>
          <el-button type="primary" @click="pay">支付</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>

      </div>
    </el-dialog>


  </div>

</template>

<script>
export default {
  name: "owns",
  data() {
    return {
      value:3.7,
      radio1:-1,
      dialogVisible:false,
      cart:{
        gameId:'',
        userId:this.$store.state.userId
      },
      game:[{

      }],
      gameList:{
        userId:this.$store.state.userId,
        gameList:[]
      },
      total: 0,
      size: 100,
      current: 1,
      tableData: [
      ],
      search: ''
    }
  },
  created(){
    this.getGameList();
  },
  methods: {
    getGameList() {
      this.$axios.get('/game/owngame/'+ +sessionStorage.getItem('userId'),{
        params:{
          size:this.size,
          current:this.current
        }
      }).then(res => {
        this.tableData = res.data.gameList
        this.total= res.data.total
        this.current= res.data.current
      })
    },
    filterTag(value, row) {
      return row.gameType === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.cart.gameId=row.gameId;
      this.$axios.post('/cart/add' , this.cart)
          .then(res => {
            if(res.data.status === 200) {
              this.$message({
                showClose: true,
                message: '加入购物车成功',
                type: 'success',
              });
            }
          })
    },
    resetForm(formName) {
      this.game=[{}]
      this.dialogVisible = false
      this.editForm = {}
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.game.fill(row);
      this.dialogVisible=true;
      this.gameList.userId=this.$store.state.userId
      this.gameList.gameList.push(row.gameId)
      console.log(this.gameList);
      this.$axios.post('/order/confirm' ,this.gameList )
          .then(res => {
            if(res.data.status === 200) {
            }
          })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.getGameList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.getGameList();
    },
    handleClose() {
      this.resetForm();
    },
    pay(){
      if(this.radio1 === -1){
        this.$message({
          showClose: true,
          message: '请选择支付方式',
          type: 'error',
        });
        return false
      }
      this.$axios.post('/pay' ,this.gameList )
          .then(res => {
            if(res.data.status === 200) {
              this.$message({
                showClose: true,
                message: '支付成功',
                type: 'success',
              });
              this.dialogVisible=false
            }
          })
      this.gameList.gameList.splice(0,1);
    }
  },
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>